<template>
  <teleport to="body">
    <div v-if="show && mask" class="modal-mask" @click="maskCloseable && $emit('onCancel')" />
    <Transition name="bounce">
      <div v-if="show" class="modal-wrapper flc" :style="{ height: computedGeometry(height) }">
        <div class="modal-container" :style="{ width: computedGeometry(width) }">
          <div class="modal-logo bg-contain absolute left-20px bottom-12px w-142px h-29px"></div>
          <div class="modal-footer-bg bg-contain absolute right-0px bottom-0px w-92px h-89px"></div>
          <button v-if="closeable" class="modal-close" @click="$emit('onCancel')">

            <img src="@/assets/icons/pc/pc-close.png" />
          </button>
          <div v-if="$slots.header" class="modal-header">
            <slot name="header" />
          </div>
          <div class="modal-body scroll" :class="{ 'scroll-mask': isScroll }" @scroll="onScroll">
            <div>
              <slot />
            </div>
          </div>
          <div class="modal-footer">
            <slot name="footer" />
          </div>
        </div>
      </div>
    </Transition>
  </teleport>
</template>
<script
  lang="ts"
  setup
  name="Modal"
>
const props = defineProps({
  show: { type: Boolean, default: false },
  mask: { type: Boolean, required: false, default: true },
  closeable: { type: Boolean, required: false, default: true },
  maskCloseable: { type: Boolean, required: false, default: false },
  width: { type: [String, Number], required: false, default: 460 },
  height: { type: [String, Number], required: false, default: '100%' },
});

defineEmits(['onCancel']);

const isScroll = ref(false);

const lockScroll = () => {
  document.body.classList.add('overflow-hidden')
}

const unlockScroll = () => {
  document.body.classList.remove('overflow-hidden')
}

const computedGeometry = (value: number | string) => {
  return typeof value === 'number' ? `${value}px` : value;
}

const onScroll = (e: any) => {
  const scrollLen = e?.target?.scrollTop;
  const isBottom = (e.target?.scrollHeight - scrollLen) === e?.target?.clientHeight;
  if (scrollLen === 0 || isBottom) {
    isScroll.value = false;
  } else {
    isScroll.value = true;
  };
};

watch(
  () => props.show,
  (value: boolean) => {
    value ? lockScroll() : unlockScroll()
  },
)
</script>
<style
  lang="scss"
  
>
.modal-mask {
  @apply fixed inset-0 w-full h-full;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.65);
}



.modal-wrapper {
  @apply fixed top-1/10 left-0 right-0 w-full max-h-full select-none;
  z-index: 110;
  transition: 0.3s;
  transition-property: transform, opacity;
  width: 560px;
  left: 18%;

  .modal-logo {
    background: url('@/assets/images/pc/form-logo.png') no-repeat;
    background-size: contain;
  }

  .modal-footer-bg {
    background: url('@/assets/images/pc/form-footer.png') no-repeat;
    background-size: contain;
  }

  .modal-container {
    @apply flex flex-col max-h-full;
    position: relative;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(215, 228, 255, 0.5) 0%, rgba(215, 228, 255, 0.2) 100%);
    box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
    padding: 30px 10px 50px;
    max-width: calc(100vw - 32px);
    border-radius: 24px 10px 10px 10px;
    transform: translateZ(0);
    z-index: 1;
    border: 1px solid rgba(198, 212, 226, 1);

    &::before {
      @apply absolute h-full -z-1 top-0 left-0 w-full overflow-hidden backdrop-filter backdrop-blur-15px;
      border-radius: 24px 10px 10px 10px;
      content: '';
    }

    &::after {
      @apply absolute top-0;
      left: 50%;
      content: '';
      border: 1px solid;
      width: 80%;
      margin-left: -40%;
      border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
      transform: scale(0.5);
    }

    .modal-icon {
      @apply flex justify-center;

      .icon {
        width: 29px;
        height: 29px;
      }
    }

    .modal-header {
      @apply text-center mb-5;

    }

    .modal-close {
      @apply absolute -top-10px -right-10px cursor-pointer flex justify-center items-center;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      outline: none;
      user-select: none;
    }

    .modal-body {
      padding-right: 10px;
      padding-left: 20px;
      max-height: calc(100% - 160px);
    }

    .modal-footer {
      margin-top: 12px;
    }

    .scroll-mask {
      mask: linear-gradient(180deg, transparent, black 30px, black calc(100% - 30px), transparent 100%);
      -webkit-mask: linear-gradient(180deg, transparent, black 30px, black calc(100% - 30px), transparent 100%);
    }

    ::-webkit-scrollbar {
      width: 5px;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-track {
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background: #ffffff;
      border-radius: 4px;
    }
  }
}


.overflow-hidden {
  overflow: hidden !important;
}

.bounce-enter-from {
  transform: translate3d(0, -50%, 0) scale(0.7);
  opacity: 0;
}

.bounce-leave-active {
  transform: translate3d(0, -50%, 0) scale(0.9);
  opacity: 0;
}
</style>
